<!DOCTYPE html >

<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        html,
        body {
            height: 100%;
        }

        body {
            margin: 0;
            padding: 0;
            list-style: none;
            font-size: 12px;
        }

        #main {
            height: 100%;
        }
    </style>
</head>

<body onresize="onWindowResize();">
<div id="main"></div>
<script type="text/javascript" src="./js/qwebchannel.js"></script>
<script type="text/javascript" src="./js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="./js/echarts/echarts.js" ></script>
<script type="text/javascript" src="./js/echarts/china.js"></script>
<script type="text/javascript">
    var myChart;
    window.onload = function() {
        myChart = echarts.init(document.getElementById("main"))
        // 基于准备好的dom，初始化echarts实例
        //配置地图
        myChart.setOption({
            series: [{
                type: 'map',
                map: 'china'
            }]
        });
        // 指定图表的配置项和数据
        var data = [
            {name: '海门', value: 40},
            {name: '鄂尔多斯', value: 12},
            {name: '招远', value: 62},
            {name: '舟山', value: 82},
            {name: '齐齐哈尔', value: 14},
            {name: '盐城', value: 125},
            {name: '赤峰', value: 126},
            {name: '青岛', value: 91},
            {name: '乳山', value: 118},
            {name: '金昌', value: 119},
            {name: '泉州', value: 121},
            {name: '莱西', value: 21},
            {name: '日照', value: 21},
            {name: '胶南', value: 55},
            {name: '南通', value: 60},
            {name: '拉萨', value: 84},
            {name: '云浮', value: 44},
            {name: '梅州', value: 125},
            {name: '文登', value: 95},
            {name: '上海', value: 125},
            {name: '攀枝花', value: 95},
            {name: '威海', value: 65},
            {name: '承德', value: 75},
            {name: '厦门', value: 46},
            {name: '汕尾', value: 66},
            {name: '克拉玛依', value: 72},
            {name: '大庆', value: 279}
        ];
        //城市设置[经度，纬度]
        var geoCoordMap = {
            '海门':[121.15,31.89],
            '鄂尔多斯':[109.781327,39.608266],
            '招远':[120.38,37.35],
            '舟山':[122.207216,29.985295],
            '齐齐哈尔':[123.97,47.33],
            '盐城':[120.13,33.38],
            '赤峰':[118.87,42.28],
            '青岛':[120.33,36.07],
            '乳山':[121.52,36.89],
            '金昌':[102.188043,38.520089],
            '泉州':[118.58,24.93],
            '莱西':[120.53,36.86],
            '日照':[119.46,35.42],
            '胶南':[119.97,35.88],
            '南通':[121.05,32.08],
            '拉萨':[91.11,29.97],
            '云浮':[112.02,22.93],
            '梅州':[116.1,24.55],
            '文登':[122.05,37.2],
            '上海':[121.48,31.22],
            '攀枝花':[101.718637,26.582347],
            '威海':[122.1,37.5],
            '承德':[117.93,40.97],
            '厦门':[118.1,24.46],
            '汕尾':[115.375279,22.786211],
            '克拉玛依':[84.77,45.59],
            '大庆':[125.03,46.58]
        };

        //浮层内容的设置（）
        var $imgs = [
            {area: '海门', txt:'哈哈哈'},
            {area: '鄂尔多斯', txt:'哈哈哈'},
            {area: '招远', txt:'哈哈哈'},
            {area: '舟山', txt:'哈哈哈'},
            {area: '齐齐哈尔', txt:'哈哈哈'},
            {area: '盐城', txt:'哈哈哈'},
            {area: '赤峰', txt:'哈哈哈'},
            {area: '青岛', txt:'哈哈哈'},
            {area: '乳山', txt:'哈哈哈'},
            {area: '金昌', txt:'哈哈哈'},
            {area: '泉州', txt:'哈哈哈'},
            {area: ' 莱西', txt:'哈哈哈'},
            {area: '日照', txt:'哈哈哈'},
            {area: '胶南', txt:'哈哈哈'},
            {area: '南通', txt:'哈哈哈'},
            {area: '拉萨', txt:'哈哈哈'},
            {area: '云浮', txt:'哈哈哈'},
            {area: '梅州', txt:'哈哈哈'},
            {area: '文登', txt:'哈哈哈'},
            {area: '上海', txt:'哈哈哈'},
            {area: '攀枝花', txt:'哈哈哈'},
            {area: '威海', txt:'哈哈哈'},
            {area: '承德', txt:'哈哈哈'},
            {area: '厦门', txt:'哈哈哈'},
            {area: '汕尾', txt:'哈哈哈'},
            {area: '克拉玛依', txt:'哈哈哈'},
            {area: '大庆', txt:'哈哈哈'}
        ];

        var convertData = function (data) {
            var res = [];
            for (var i = 0; i < data.length; i++) {
                var geoCoord = geoCoordMap[data[i].name];
                if (geoCoord) {
                    res.push({
                        name: data[i].name,
                        value: geoCoord.concat(data[i].value)
                    });
                }
            }
            return res;
        };

        option = {
            backgroundColor: '#404a59',
            title: {
                text: '碳交易量',//标题
                subtext: '各省碳交易量（吨）',
                sublink: '#',//subtext跳转地址
                left: 'center',
                textStyle: {
                    color: '#fff'
                }
            },
            //浮层设置
            tooltip : {
                trigger: 'item',
                formatter: function (params,ticket,callback){
                    var $pna = params.name;
                    var res = "";

                    for(var i = 0;i<$imgs.length;i++){
                        if($imgs[i].area == $pna){
                            res = '<p>'+ $imgs[i].txt +'</p>';//设置自定义数据的模板，这里的模板是文字
                            //console.log(res);
                            break;
                        }
                    }

                    setTimeout(function (){
                        // 仅为了模拟异步回调
                        callback(ticket, res);//回调函数，这里可以做异步请求加载的一些代码
                    }, 15)
                    return "loading";
                }
            },
            legend: {
                orient: 'vertical',
                y: 'bottom',
                x:'right',
                data:['销量前三'],
                textStyle: {
                    color: '#fff'
                }
            },
            geo: {
                map: 'china',
                label: {
                    emphasis: {
                        show: false
                    }
                },
                roam: true,
                itemStyle: {
                    normal: {
                        areaColor: '#323c48',
                        borderColor: '#111'
                    },
                    emphasis: {
                        areaColor: '#2a333d'
                    }
                }
            },
            series : [
                {
                    name: '销量前三',
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    data: convertData(data),
                    symbolSize: function (val) {
                        return val[2] / 10;
                    },
                    label: {
                        normal: {
                            formatter: '{b}',
                            position: 'right',
                            show: false
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#ddb926'
                        }
                    }
                },
                {
                    name: 'Top 5',
                    type: 'effectScatter',
                    coordinateSystem: 'geo',
                    data: convertData(data.sort(function (a, b) {
                        return b.value - a.value;
                    }).slice(0, 3)),
                    symbolSize: function (val) {
                        return val[2] / 10;
                    },
                    showEffectOn: 'render',
                    rippleEffect: {
                        brushType: 'stroke'
                    },
                    hoverAnimation: true,
                    label: {
                        normal: {
                            formatter: '{b}',
                            position: 'right',
                            show: true
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#f4e925',
                            shadowBlur: 10,
                            shadowColor: '#333'
                        }
                    },
                    zlevel: 1
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }

    function onWindowResize() {
        myChart.resize(window.innerWidth, window.innerHeight)
    }
</script>

</body>

</html>
